import * as THREE from "three";
import TWEEN from "tween";

// three部分的js对象不再是一个react对象，所以不需要继承react的PureComponent对象
export default class Application {
  /**
   * 构造函数
   */
  constructor(option) {
    this.num = 0;
    this.canvas = option.canvas;
    this.setRenderer();
    this.setCamera();
    this.setWorld();
    this.setLight();
    this.setScene();
    this.render();
  }
  // 设置渲染器
  setRenderer() {
    const renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      alpha: true
    });
    this.renderer = renderer;
  }
  // 设置摄像机
  setCamera() {
    this.camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    this.camera.position.set(5, 10, 20);
    this.camera.lookAt(new THREE.Vector3(0, 3, 0));
  }
  // 设置世界
  setWorld() {
    this.world = new THREE.Object3D();
    const ballMesh = new THREE.Mesh(
      new THREE.SphereGeometry(0.5, 16, 8),
      new THREE.MeshLambertMaterial({
        color: 0xffff00
      })
    );
    // this.world = ballMesh
    ballMesh.position.y = this.num;
    ballMesh.name = "ballMesh";
    this.world.add(ballMesh);
    let tw = new TWEEN.Tween(ballMesh.position)
      .to({ x: 1, y: 1, z: 1 }, 1000) //最终值
      .easing(TWEEN.Easing.Quartic.InOut); //变化方法
    console.log(TWEEN.Easing);
    tw.start();
    console.log(this.world.getObjectByName("ballMesh").position.y);
  }
  // 设置灯光
  setLight() {
    this.light = new THREE.DirectionalLight(0xffffff);
    this.light.position.set(10, 10, 15);
  }
  // 设置场景
  setScene() {
    // 初始化场景
    this.scene = new THREE.Scene();
    // 场景添加摄像机
    this.scene.add(this.camera);
    // 场景添加世界
    this.scene.add(this.world);
    // 追加灯光
    this.scene.add(this.light);
  }
  render() {
    // 循环调用渲染器
    window.requestAnimationFrame(() => {
      TWEEN.update();
      this.renderer.render(this.scene, this.camera);
      this.render();
    });
  }
}
